<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <meta http-equiv="Content-Type" content="text/html" /> -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add one byte in front of string in different numbers</title>
</head>
<style>
    body {
        font-family: Consolas, "Courier New", monospace;
        font-size: 24px;
        min-width: 1080px;
        background-color: #333;
        color: #fff;
    }

    header {
        width: 100%;

        p {
            margin-block-start: 1.2rem;
            margin-block-end: 1.2rem;
            text-align: center;
            font-size: 2rem;
            line-height: 2rem;
            font-weight: bolder;

            input {
                width: 36rem;
                font-size: 2rem;
                line-height: 2rem;
                text-align: center;
                border-radius: 0.4rem;
                letter-spacing: 0.4rem;
            }
        }
    }

    footer {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
        
        margin: 0 auto;
        min-height: 1rem;
        width: 1080px;

        span {
            display: block;
            line-height: 1.4rem;
            div:nth-child(2n+1) {
                color: #66f;
            }
            div:nth-child(2n) {
                color: #6f6;
            }
            div:first-child {
                color: #f66;
            }
        }

    }
</style>

<body>
    <header>
        <p><input type="number" id="ipt" placeholder="Input Hex Number" /></p>
    </header>

    <footer id="cols"></footer>
</body>

<script type="module" src="./tpo2n.mjs"></script>

<script type="module">
    "use strict";
    import { next2 } from "./tpo2n.mjs";

    const MAX_LEN = 10;
    // const objSum = (obj) => Object.values(obj).reduce((a, b) => a + b, 0);
    // const arrNullStr = (arr) => arr.map((e) => (e === null ? "." : e)).join("");

    const cols = document.getElementById("cols");
    // const orders = [0,3,1,4,2,5]

    document.getElementById("ipt").addEventListener("change", (evn) => {
        let nums = evn.target.value.toString().trim().split('')
        if (nums.length === 0 || nums.length > MAX_LEN) return alert("Out of Range");
        nums = nums.map(e => parseInt(e))
        if (nums.some(n =>isNaN(n) || n < 0 || n > 5)) return alert("Error Input");

        cols.replaceChildren();

        // console.log("next2(nums)", next2(nums))

        for (let i = 0; i < 6; i++) {
            let span =  document.createElement("span");
            
            let ns = Array.from(nums)
            // ns.unshift(orders[i])
            ns.unshift(i)
            
            let div = document.createElement("div");
            div.textContent = ns.join("");
            span.appendChild(div);

            while (ns.length >= 2) {
                ns = next2(ns);
                div = document.createElement("div");
                div.textContent = ns.join("");
                span.appendChild(div);
            }

            cols.appendChild(span);
        }
    });
</script>